<template>
  <el-dialog :title="getTitle" :close-on-click-modal="false" :visible.sync="visible" @close="clearDataList()" width="90vw" top="3vh">
    <el-container>
      <el-main style="height:75vh">
        <el-tabs type="card" v-model="activeTab">
          <el-tab-pane label="基本情况" name="first">
            <div>
              <el-table :data="hzTitle" border style="width: 100%" >
                <el-table-column prop="" label="序号" :formatter="nShowIndex"  width="80"></el-table-column>
                <el-table-column prop="bcprname" label="对象" width="120"></el-table-column>
                <el-table-column label="总数"  align='center'>>
                  <el-table-column prop="zps" label="总票数" width="100"></el-table-column>
                  <el-table-column prop="ppl" label="评票率" :formatter="nFormatterShow" width="140"></el-table-column>
                </el-table-column>
                <el-table-column label="实名" align='center'>
                  <el-table-column prop="smps" label="合计" width="100"></el-table-column>
                  <el-table-column prop="smytj" label="已提交" width="120"></el-table-column>
                  <el-table-column prop="smwtj" label="未提交" width="120"></el-table-column>
                </el-table-column>
                <el-table-column label="匿名" align='center'>
                  <el-table-column prop="nmps" label="合计" width="100"></el-table-column>
                  <el-table-column prop="nmytj" label="已提交" width="120"></el-table-column>
                  <el-table-column prop="nmwtj" label="未提交" width="120"></el-table-column>
                </el-table-column>
                <!--<el-table-column prop="zps" label="总票数" width="100"></el-table-column>-->
                <!--  <el-table-column prop="smps" label="实名票" width="100"></el-table-column>-->
                <!--  <el-table-column prop="smytj" label="实名已提交" width="145"></el-table-column>-->
                <!--  <el-table-column prop="smwtj" label="实名未提交" width="145"></el-table-column>-->
                <!--  <el-table-column prop="nmps" label="匿名票" width="100"></el-table-column>-->
                <!--  <el-table-column prop="nmytj" label="匿名票已提交" width="170"></el-table-column>-->
                <!--  <el-table-column prop="nmwtj" label="匿名票未提交" width="170"></el-table-column>-->
                <!--  <el-table-column prop="ppl" label="评票率" :formatter="nFormatterShow" width="140"></el-table-column>-->
              </el-table>
            </div>

            <div>被测评列表</div>
            <div class="avue-crud" style="max-height:calc(100vh - 475px)" v-if="bcppList.length>0">
              <el-table :data="bcppList" border style="width: 100%" height="250">
                <el-table-column prop="" label="序号" :formatter="nShowIndex"  width="80"></el-table-column>
                <el-table-column prop="bcprname" label="对象" width="100"></el-table-column>
                <el-table-column prop="zps" label="总票数" width="100"></el-table-column>
                <el-table-column prop="smps" label="实名票" width="100"></el-table-column>
                <el-table-column prop="smytj" label="实名已提交" width="145"></el-table-column>
                <el-table-column prop="smwtj" label="实名未提交" width="145"></el-table-column>
                <el-table-column prop="nmps" label="匿名票" width="100"></el-table-column>
                <el-table-column prop="nmytj" label="匿名票已提交" width="170"></el-table-column>
                <el-table-column prop="nmwtj" label="匿名票未提交" width="170"></el-table-column>
                <el-table-column prop="ppl" label="评票率" :formatter="nFormatterShow" width="150"></el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
          <el-tab-pane label="选票列表" name="second">
            <div class="avue-crud" >
              <el-table :data="xpList" border style="width: 100%" height="500" >
<!--                <el-table-column prop="" label="序号" :formatter="nShowIndex" width="80"></el-table-column>-->
                <el-table-column label="序号" align="center" width="80">
                  <template slot-scope="scope">
                      {{scope.$index + 1 + page.pageSize*(page.currentPage-1)}}
                  </template>
                </el-table-column>
                <el-table-column prop="xpCode" label="主票号" width="180"></el-table-column>
                <el-table-column prop="bcpDx" label="被评对象" width="120"></el-table-column>
                <el-table-column prop="bcpDeptName" label="被评部门名称" width="170"></el-table-column>
                <el-table-column prop="bcpUserName" label="被评人员名称" width="170"></el-table-column>
                <el-table-column prop="isSm" label="是否实名" width="120"></el-table-column>
                <el-table-column prop="cpDeptName" label="测评部门名称" width="170"></el-table-column>
                <el-table-column prop="cpUserName" label="测评人员名称" width="170"></el-table-column>
                <el-table-column prop="dfZt" label="测评状态" width="120"></el-table-column>
                <el-table-column prop="dfJssj" label="开始测评时间" width="170" :formatter="nShowDate"></el-table-column>
                <el-table-column prop="dfKssj" label="完成测评时间" width="170" :formatter="nShowDate"></el-table-column>

              </el-table>
              <div style="margin-top:20px">
                <el-pagination
                  background
                  layout="total,prev, pager, next,jumper"
                  @current-change="handleCurrentChange"
                  :current-page="page.currentPage"
                  :page-size ="page.pageSize"
                  :total="page.total">
                </el-pagination>
              </div>

            </div>
          </el-tab-pane>
        </el-tabs>
      </el-main>

    </el-container>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" plain @click="clearDataList">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getHdhzApi,getCpphzApi } from '@/api/ceping/cepinghdglxpxxb'

export default {
  data(){
    return{
      hdName:'',
      hdId:'',
      cppId:'',
      cppName:'',
      visible: false,
      bcppList:[],
      xpList:[],
      hzTitle:[],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 50, // 每页显示多少条,
        isAsc: false// 是否倒序
      },
      activeTab:'',
      xpListData:[]
    }
  },
  computed:{
    getTitle(){
      let lTitle = '';
      if(this.cppName === ''){
        lTitle = this.hdName;
      }else{
        lTitle = this.hdName + ' - ' + this.cppName;
      }
      return lTitle;
    }
  }
  ,
  methods:{
    handleCurrentChange(val){
      if(val === 1){
        this.xpList = this.xpListData.slice(0,this.page.pageSize);
      }
      else {
        this.xpList = this.xpListData.slice(val * this.page.pageSize - this.page.pageSize ,val * this.page.pageSize);
      }

      this.page.currentPage=val;
    }
    //------js 分页
    ,
    //取得百分比
    getPercentage(va){
      return  Number(va * 100).toFixed(2) + '%';
    },
    //列显示重新定义
    nFormatterShow(row, column, cellValue, index){
      return this.getPercentage(cellValue);
    },
    //日期重新显示
    nShowDate(row, column, cellValue, index){
      if(cellValue){
        return this.$moment(cellValue).format("YYYY-MM-DD");
      }else {
        return cellValue;
      }
    },
    nShowIndex(row, column, cellValue, index){
      return index + 1;
    }
    ,
    // 初始化清零
    setInitPhz(){
      this.hdName = '';
      this.hdId = '';
      this.cppId = '';
      this.cppName = '';
      this.bcppList=[];
      this.xpList =[] ;
      this.xpListData = [];
      this.hzTitle = [];
      this.activeTab ="second";
    },
    // 初始化
    init(PidDate,ChildDate){
      this.visible = true;
      this.setInitPhz();

      this.hdId = PidDate.id;
      this.hdName = PidDate.hdName;

      if(ChildDate){
        this.cppId = ChildDate.cppId ;
        this.cppName = ChildDate.cppName;
      }

      this.getDataList();
      // this.getFirstFy();
    },
    // 关闭清空变量
    clearDataList(){
      this.visible = false;
      this.setInitPhz();
    },
    // 取得数据
    getDataList(){
      let dateMap;
      if(this.cppName === '') { //会议票
        getHdhzApi(this.hdId).then(res => {
          dateMap = res.data.data;
          this.bcppList = dateMap["bcpplist"];
          //this.xpList = dateMap["cepingHdglXpxxbList"];
          this.hzTitle.push(dateMap["cpphz"]);
          ////console.log(dateMap);
          ////console.log(this.bcppList);
          ////console.log(this.xpList);
          ////console.log(this.hzTitle);
          this.getPagingShow(dateMap["cepingHdglXpxxbList"]);
        })
      }else { //测评票
        getCpphzApi(this.hdId,this.cppId).then(res => {
          dateMap = res.data.data;
          //console.log('进入测评票')
          this.bcppList = dateMap["bcpplist"];
          //this.xpList = dateMap["cepingHdglXpxxbList"];
          this.hzTitle.push(dateMap["cpphz"]);
          this.getPagingShow(dateMap["cepingHdglXpxxbList"]);
        })
      }
    }
    ,
    //分页
    getPagingShow(dataList){
      this.xpListData = dataList;
      this.page.total = dataList.length;
      this.xpList = this.xpListData.slice(0,this.page.pageSize);
      this.page.currentPage = 1;
    }

  }
}
</script>

<style scoped>

</style>
